<template>
  <!-- vue3页面 -->
  <div ref="echart" class="box" style="width: 100%; height: 100%"></div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted, ref, watch, shallowRef } from "vue";

type EChartsOption = echarts.EChartsOption;
const echart = ref<HTMLDivElement>();
const myChart = shallowRef<echarts.ECharts>();
const props = defineProps<{
  options: EChartsOption;
}>();
onMounted(() => {


  let chartValue = echarts.init(echart.value);
  myChart.value = chartValue;
});

watch(
  () => props.options,
  () => {
    if (props.options) {
      myChart.value?.setOption(props.options);
    }
  }
);

const resize = () => {
  myChart.value?.resize();
};
setInterval(() => {}, 2000);
defineExpose({
  resize,
});
</script>

<style scoped lang="less">
.main {
  width: 100%;
  height: 100%;
}
</style>
